<template>
    <div>
        <div class="header" v-show="channel==0||channel==3">
            <i class="iconfont icon-qianjin-copy" @click="iconClick"></i>
            取现详情
        </div>
        <div class="shu" v-show="channel==0||channel==3"></div>
        <div class="item">
            <div class="item-list">
                <div class="item-list-left">订单号</div>
                <div class="item-list-right">{{methodList.order_no}}</div>
            </div>
            <div class="item-list">
                <div class="item-list-left">取现金额</div>
                <div class="item-list-right">
                    <em style="font-size:0.64rem;color:#ff7a7b;">{{methodList.borrow_amount}}</em>元</div>
            </div>
            <div class="item-list">
                <div class="item-list-left">手续费</div>
                <div class="item-list-right">
                    <em style="font-size:0.5333rem;">{{methodList.commission_amount}}</em>元
                    <i @click="msg"></i>
                </div>
            </div>
            <div class="item-list">
                <div class="item-list-left">取现卡</div>
                <div class="item-list-right">
                    <img :src="methodList.borrowCodeBankImgUrl" alt="">
                    <span>{{methodList.borrowCardName}}（{{methodList.borrowCardNo}}）</span>
                </div>
            </div>
            <div class="item-list">
                <div class="item-list-left">到账卡</div>
                <div class="item-list-right">
                    <img :src="methodList.reachCardBankImgUrl" alt="">
                    <span>{{methodList.reachCardName}}（{{methodList.reachCardNo}}）</span>
                </div>
            </div>
            <div class="item-list">
                <div class="item-list-left">订单状态</div>
                <div class="item-list-right" v-if="methodList.status_id=='1'">等待交易</div>
                <div class="item-list-right" v-else-if="methodList.status_id=='2' || methodList.status_id=='4' || methodList.status_id=='5'">交易中</div>
                <div class="item-list-right" v-else-if="methodList.status_id=='3' || methodList.status_id=='6'">交易失败（{{methodList.massage}}）</div>
                <div class="item-list-right" v-else-if="methodList.status_id=='7'">交易成功</div>
            </div>

            <div class="item-list" v-if="methodList.status_id!='1'">
                <div class="item-list-left" v-if="methodList.status_id=='2' || methodList.status_id=='4' || methodList.status_id=='5'|| methodList.status_id=='7'">交易时间</div>
                <div class="item-list-left" v-if="methodList.status_id=='6'">失败时间</div>
                <div class="item-list-right">{{methodList.create_time}}</div>
            </div>
        </div>
        <div class="btn" v-if="methodList.status_id=='1'&&canClick=='true'" @click="repay">立即取现</div>
        <div class="btn1" v-if="methodList.status_id=='1'&&canClick=='false'">立即取现</div>

        <!-- 支付验证码弹框 -->
        <div class="verification" v-if="code.isShow">
            <div class="verificationBox">
                <div class="title">请输入支付验证码</div>
                <div class="codeBox">
                    <input type="text" v-model="code.code">
                    <div @click="getCode">{{code.mesg}}</div>
                </div>
                <div class="footer1">
                    <div class="left" @click="cancel">放弃支付</div>
                    <div class="right" @click="toPay">确认支付</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import '../../../js/lib/flexble.js'
import commons from '../../../common/js/common.js'
import Top from 'components/Header/Header'
import { Indicator, MessageBox } from "mint-ui";
export default {
    name: 'chashDetails',
    components: { Top },
    data() {
        return {
            channel: 0,
            methodList: {

            },
            headTitle: '',
            canClick: 'true',
            flag: true,
            code: {
                isShow: false,
                mesg: '获取验证码',
                time: 60,
                flag: true,
                code: ''
            }
        }
    },
    mounted() {
        Vue.http.interceptors.push((request, next) => { //请求拦截器
            //请求前
            request.headers.set('token', commons.getCookie('token')); //设置请求头
            Indicator.open('加载中...'); //请求loading
            next((response) => {
                //请求后
                Indicator.close(); //隐藏loading
                return response
            })
        })
        window.localStorage.setItem('shouTogetchashObj', '');
        // 查询取现详情
        this.$http.get('/loansupermarket-pay/order/enchashmentDetails?orderNo=' + commons.getParameter('order_no')).then(function(response) {
            var resBody = response.body;
            if (resBody.code == '000') {
                this.methodList = resBody.data;
                this.methodList.create_time = commons.formatDate1(this.methodList.create_time);
            } else if (resBody.code == '444') {
                window.location.href = '../user/login.html?history=1';
            } else {
                if (resBody.mesg) {
                    MessageBox.alert(resBody.mesg, '提示');
                }
            }
        })

        //处理头部（安卓和ios去掉头部）
        this.channel = commons.getParameter('channel') ? commons.getParameter('channel') : 0;

        clearInterval('timer')
    },
    methods: {
        //返回箭头
        iconClick() {
            if (this.channel == 0) {
                // this.$router.go(-1);
                window.history.go(-1);
            } else if (this.channel == 3) {
                // this.$router.push({ path: '/main/mine' });
                window.location.href = '../mine/mine.html';
            }

        },
        //手续费提示
        msg() {
            let rate = this.methodList.commission_rate * 100;
            rate = rate.toFixed(2);
            MessageBox.alert('当前取现手续费为' + rate + '%');
        },
        //交易
        repay() {
            if (!this.canClick) {
                return;
            }
            // MessageBox.confirm('您将进入支付页面，请不要退出，退出将会导致交易关闭?').then(action => {

            // });

            //确认取现，完成后去取现中页面
            //弹出对话框，并且自动发送验证码
            this.code.isShow = true;//显示弹框
            this.getCode();//发送验证码

        },
        //获取验证码
        getCode() {
            if (!this.code.flag) {
                return;
            }
            // 验证码60s
            this.code.flag = !this.code.flag;
            let time = 60;
            let that = this;
            if (!this.code.flag) {
                var timer = setInterval(function() {
                    time -= 1;
                    that.code.mesg = time + 's后可重新获取';
                    if (time == 0) {
                        clearInterval(timer);
                        that.code.mesg = '获取验证码'
                        that.code.flag = true;
                    }
                }, 1000)
            };
            // 获取短信验证码
            this.$http.post('/loansupermarket-pay/pay/sendPayValidateCode', { orderNo: commons.getParameter('order_no') })
                .then((response) => {
                    var resBody = response.body;
                    if (resBody.code == '000') {

                    } else if (resBody.code == '444') {
                        // this.$router.push({path:'/login'});
                        widow.location.href = '../user/login.html?history=1';
                    } else if (resBody.code == '114') {//卡被删除过，无法取现
                        this.code.isShow = false;//隐藏弹框
                        this.canClick = 'false';
                        MessageBox.alert(resBody.mesg, '提示');
                        return;
                    } else {
                        this.code.flag = !this.code.flag;
                        MessageBox.alert(resBody.mesg, '提示');
                        clearInterval(timer);
                        that.codeTime = '获取验证码'
                    }
                })

        },

        cancel() {
            this.code.isShow = false;
            window.sessionStorage.setItem('canClick', 'true');
        },
        toPay() {
            if (this.flag) {
                this.flag = false;

                this.$http.post('/loansupermarket-pay/pay/bindCardPay', { orderNo: commons.getParameter('order_no'), validateCode: this.code.code })
                    .then((response) => {
                        var resBody = response.body;
                        if (resBody.code == '000' || resBody.code == '001' || resBody.code == '111' || resBody.code == '222') {
                            widow.location.href = './repayStatus.html?code=' + resBody.code + '&order_no=' + commons.getParameter('order_no');
                        } else if (resBody.code == '444') {
                            window.location.href = '../user/login.html?history=1';
                        } else {
                            if (resBody.mesg) {
                                MessageBox.alert(resBody.mesg, '提示');
                            }

                        }
                    })
                setTimeout(function() {
                    this.flag = true;
                }, 3000);

            }
        }

    }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/base.scss';
.header {
    background: -webkit-linear-gradient(bottom, #2ce9e8, #7dd7ff);
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 1.2rem; // background: $primaryColor;
    color: #fff;
    text-align: center;
    font-size: 0.42rem;
    line-height: 1.2rem;
    .icon-qianjin-copy {
        position: absolute;
        left: 0.4rem;
        color: #fff;
    }
}

.shu {
    height: 1.2rem;
    width: 100%;
}

.item {
    background: #fff;
    padding: 0 0.5333rem;
    overflow: hidden; // padding-top: 1.2rem;
    &-list {
        overflow: hidden;
        border-bottom: 1px solid #e5e5e5;
        &-left {
            float: left;
            width: 30%;
            text-align: left;
            font-size: 0.373333rem;
            color: $grayColor;
            line-height: 0.58666rem;
            margin: 0.373333rem 0;
        }
        &-right {
            float: left;
            width: 70%;
            text-align: left;
            font-size: 0.4rem;
            color: #333;
            line-height: 0.58666rem;
            margin: 0.373333rem 0;
            em {
                font-style: normal;
            }
            i {
                float: right;
                width: 0.4rem;
                height: 0.4rem;
                margin-top: 0.1rem;
                background: url(../../../assets/enchash/tishi.png);
                background-size: 0.4rem 0.4rem;
            }
            img {
                float: left;
                width: 0.58666rem;
                height: 0.58666rem;
                margin-right: 0.16rem;
                span {
                    float: left;
                }
            }
        }
    }
}

.item-list:last-child {
    border: none;
}

.btn {
    width: 9rem;
    height: 1.2rem;
    line-height: 1.2rem;
    background: linear-gradient(to right, #2ce9e8, #7cd7ff);
    color: #ffffff;
    margin: 0 auto;
    margin-top: 0.8rem;
    font-size: 0.45333rem;
    border-radius: 0.15rem;
}

.btn1 {
    width: 9rem;
    height: 1.2rem;
    line-height: 1.2rem;
    background: #ccc;
    color: #ffffff;
    margin: 0 auto;
    margin-top: 0.8rem;
    font-size: 0.45333rem;
    border-radius: 0.15rem;
}

.verification {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2000;
    .verificationBox {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 6.6rem;
        height: 3.4rem;
        margin-top: -1.7rem;
        margin-left: -3.3rem;
        background: #fff;
        border-radius: 0.15rem;
        .title {
            height: 1.2rem;
            line-height: 1.2rem;
            font-size: 0.4rem;
        }
        .codeBox {
            height: 0.8rem;
            line-height: 0.8rem;
            input {
                float: left;
                margin-left: 10%;
                width: 40%;
                height: 0.8rem;
                border: 1px solid #ccc;
                box-sizing: content-box;
            }
            div {
                float: left;
                width: 39%;
                height: 0.8rem;
                line-height: 0.8rem;
                border: 1px solid #ccc;
                box-sizing: content-box;
                border-left: none;
            }
        }
        .footer1 {
            margin-top: 0.4rem;
            height: 1rem;
            line-height: 1rem;
            border-top: 1px solid #ccc;
            .left {
                float: left;
                width: 50%;
                position: relative;
            }
            .left::after {
                content: '';
                position: absolute;
                right: 0;
                top: 0;
                width: 1px;
                height: 1rem;
                background: #ccc;
            }
            .right {
                float: right;
                width: 50%;
            }
        }
    }
}
</style>
